<template>
  <el-dialog
    v-model="dialogVisible"
    title="事项详情"
    top="4%"
    width="75%"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-tabs v-model="tabName" @tab-change="handleTabChange">
      <el-tab-pane label="事项信息" name="matterInfo" />
      <el-tab-pane label="单位签收信息" name="receiveInfo" />
      <el-tab-pane label="单位办理信息" name="processInfo" />
    </el-tabs>
    <el-scrollbar max-height="61vh" v-loading="loading">
      <div class="mr-4">
        <template v-if="tabName === 'matterInfo'">
          <MatterInfo ref="matterInfo" />
        </template>
        <template v-else-if="tabName === 'receiveInfo'">
          <ReceiveInfo :matter-id="rowData.matterId" />
        </template>
        <template v-else-if="tabName === 'processInfo'">
          <ProcessInfo :matter-id="rowData.matterId" />
        </template>
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer flex justify-between items-center">
        <el-button
          v-if="allowDone && userStore.isRolePermission(matterDoneRole)"
          type="danger"
          @click="handleClickDone"
        >
          办结
        </el-button>
        <div v-else></div>

        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, useTemplateRef } from 'vue'
import MatterInfo from '@/components/showInfo/MatterInfo.vue'
import { ElMessageBox, FormInstance } from 'element-plus'
import { getMatterDetail } from '@/api/mission/thing'
import ReceiveInfo from '@/components/showInfo/ReceiveInfo.vue'
import ProcessInfo from '@/components/showInfo/process/ProcessInfo.vue'
import { matterDone } from '@/api/mission/follow'
import { Message } from '@/hooks/message'
import useUserStore from '@/stores/user'

const userStore = useUserStore()

const allowDone = ref(false)
const emits = defineEmits(['update'])

const matterDoneRole = [
  'follow:list:qfSupervisoryWorker',
  'follow:list:qwSupervisoryWorker',
]

const dialogVisible = ref(false)
const loading = ref(false)
const matterInfo = useTemplateRef<InstanceType<typeof MatterInfo>>('matterInfo')
const formRef = useTemplateRef<FormInstance>('formRef')
const tabName = ref('matterInfo')
const rowData = reactive({
  matterId: null,
  receiveState: null,
})
const formData = reactive({
  responsibleLeaderId: null,
  responsibleLeaderPhone: null,
  responsibleDeptId: null,
  responsibleUserId: null,
  responsibleUserPhone: null,
})

const showData = ref({
  unitName: null,
  responsibleLeaderName: null,
  responsibleLeaderPhone: null,
  responsibleDeptName: null,
  responsibleUserName: null,
  responsibleUserPhone: null,
})

async function handleTabChange() {
  if (tabName.value === 'matterInfo') {
    await setMatterData()
  }
}

async function setMatterData() {
  loading.value = true
  const { data } = await getMatterDetail(rowData.matterId)
  if (data.status === 200) {
    allowDone.value = Boolean(data?.data?.allowDone)
    await matterInfo.value.setData(data.data)
    showData.value = data.data.matterReceiveDetail
  }
  loading.value = false
}

function close() {
  dialogVisible.value = false
  loading.value = false
  formRef.value?.resetFields()
  Object.assign(formData, {
    responsibleLeaderId: null,
    responsibleLeaderPhone: null,
    responsibleDeptId: null,
    responsibleUserId: null,
    responsibleUserPhone: null,
  })
  Object.assign(rowData, {
    matterId: null,
    receiveState: null,
  })
  if (tabName.value === 'matterInfo') {
    matterInfo.value.reset()
  }
  tabName.value = 'matterInfo'
}

function handleClickDone() {
  ElMessageBox.confirm('确定办结本事项吗？', '办结提示')
    .then(async () => {
      const { data } = await matterDone(rowData.matterId)
      if (data.status === 200) {
        Message({
          message: data.message,
          type: 'success',
        })
        emits('update')
        close()
      }
    })
    .catch(() => {})
}

defineExpose({ show })

function show(row: any) {
  dialogVisible.value = true
  tabName.value = 'matterInfo'
  nextTick(async () => {
    Object.assign(rowData, {
      matterId: row.matterId,
      receiveState: row.status,
    })
    await setMatterData()
  })
}
</script>

<style scoped lang="scss"></style>
